<script>
import { defineComponent, reactive, provide, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default defineComponent({
  setup() {
    let route = useRoute()
    let store = useStore()
    let router = useRouter()

    let path_cn = computed(() => {
      return route.matched.map((x) => {
        return { id: x.path, label: x.meta.cn, breadcrumb: x.meta.breadcrumb }
      })
    })

    let clickHandler = (_id) => {
      router.push({
        query: { ...route.query, id: _id },
        name: route.name,
      })
    }
    let clickHandler2 = (name) => {
      router.push({
        name: name,
      })
    }
    return {
      path_cn,
      store,
      clickHandler,
      clickHandler2,
    }
  },

  render() {
    return (
      <a-breadcrumb style={{ margin: '16px 0' }}>
        {this.path_cn.map((x) => {
          return x.breadcrumb == undefined ? (
            <a-breadcrumb-item>{x.label}</a-breadcrumb-item>
          ) : (
            <a-breadcrumb-item>
              <a-button
                type="link"
                size="small"
                onClick={this.clickHandler2.bind(null, x.breadcrumb)}
              >
                {x.label}
              </a-button>
            </a-breadcrumb-item>
          )
        })}

        {this.store.state.breadcrumb.map((x) => {
          return (
            <a-breadcrumb-item>
              <a-button
                type="link"
                size="small"
                onClick={this.clickHandler.bind(null, x.id)}
              >
                {x.name}
              </a-button>
            </a-breadcrumb-item>
          )
        })}
      </a-breadcrumb>
    )
  },
})
</script>
